<script setup>
defineOptions({
  name: 'AeEditorToolsBar'
})
const props = defineProps({
  tools: {
    type: Array,
    default: () => (["image", "list-numbers", "link", "table"])
  },
  cursor: {
    type: Object,
    default: () => ({})
  }
})
const openImageUpload = () => {
  console.log(props.cursor)
  console.log('openImageUpload')
  let src = 'https://t7.baidu.com/it/u=1864914240,4204067174&fm=85&app=131&size=f242,150&n=0&f=JPEG&fmt=auto?s=C8211F76C5346E21046B98460300F0F9&sec=1689181200&t=5db57beaaa7263bb5c3e3f586d6b3476'
  let img = document.createElement('img')
  img.src = src

}
</script>

<template>
  <div>
    <ul class="ae-editor-tools-bar">
      <li><span :class="`iconfont icon-editor-image`" @click="openImageUpload"></span></li>
      <li v-for="(item,index) in tools">
        <span :class="`iconfont icon-editor-${item}`"></span>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
@import url("../style/font/iconfont.css");
ul,li,div,p {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ae-editor-tools-bar {
  display: flex;
  li {
    cursor: pointer;
    padding: 4px;
    .iconfont {
      font-size: 18px;
    }
  }
  border-bottom: 1px solid #bdbdbd;
}
</style>